<template>
  <div class="register-authentication">
    <div class="register-authentication-title">{{ $t('message.personalIdentityAuthentication') }}</div>
    <div class="register-progress-bar">
      <v-progress-bar :length="3" :active="linkActive"></v-progress-bar>
    </div>
    <ul class="register-progress-step">
      <li>{{$t('message.writeIdentityInfo')}}</li>
      <li>{{$t('message.writeLinkman')}}</li>
      <li>{{$t('message.submitIdentityConfirmSuccess')}}</li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import VProgressBar from '@/components/base/VProgressBar'

export default {
  name: 'RegisterAuthentication',
  components: {
    VProgressBar
  },
  computed: {
    linkActive () {
      return this.$route.meta.step
    }
  }
}
</script>

<style scoped>
.register-authentication {
  background-color: #fff;
  padding-top: 100px;
}

.register-authentication-title {
  line-height: 33px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.register-progress-bar {
  margin-top: 60px;
}

.register-progress-step {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 20px;
}
.register-progress-step li {
  float: left;
  width: 200px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 16px;
  color: #717171;
}
</style>